<!-- src/views/admin/OrderDetailView.vue -->
<template>
  <div class="order-detail-page">
    <h2>订单详情</h2>
    
    <div class="order-detail-container" v-if="order">
      <div class="order-header">
        <div class="order-info">
          <div class="info-item">
            <span class="label">订单编号：</span>
            <span>{{ order.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">下单时间：</span>
            <span>{{ order.date }}</span>
          </div>
          <div class="info-item">
            <span class="label">下单用户：</span>
            <span>{{ order.username }}</span>
          </div>
          <div class="info-item">
            <span class="label">订单状态：</span>
            <span :class="order.status === 'completed' ? 'status-completed' : 'status-pending'">
              {{ order.status === 'completed' ? '已完成' : '未完成' }}
            </span>
          </div>
        </div>
        
        <div class="customer-info">
          <div class="info-item">
            <span class="label">收货人：</span>
            <span>{{ order.recipient }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span>{{ order.phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">配送地址：</span>
            <span>{{ order.address }}</span>
          </div>
        </div>
      </div>
      
      <div class="order-summary">
        <div class="summary-item">
          <span class="label">商品总数：</span>
          <span>{{ order.items ? order.items.reduce((total, item) => total + (item.quantity || 0), 0) : 0 }} 件</span>
        </div>
        <div class="summary-item">
          <span class="label">订单总额：</span>
          <span class="total-amount">￥{{ order.total ? order.total.toFixed(2) : '0.00' }}</span>
        </div>
      </div>
      
      <div class="order-items">
        <h3>商品清单</h3>
        <el-table :data="order.items || []" style="width: 100%">
          <el-table-column label="商品" min-width="300">
            <template #default="scope">
              <div class="item-info">
                <img :src="scope.row.gImage" alt="商品图片" class="item-image" />
                <div class="item-details">
                  <div class="item-name">{{ scope.row.gName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" min-width="120">
            <template #default="scope">
              ￥{{ scope.row.gPrice ? scope.row.gPrice.toFixed(2) : '0.00' }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" min-width="100"></el-table-column>
          <el-table-column label="小计" min-width="120">
            <template #default="scope">
              ￥{{ scope.row.gPrice && scope.row.quantity ? (scope.row.gPrice * scope.row.quantity).toFixed(2) : '0.00' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="order-actions">
        <el-button @click="goBack">返回列表</el-button>
        <el-button 
          type="primary" 
          @click="deliverOrder" 
          :disabled="order.status === 'completed'"
          v-if="order.status !== 'completed'">
          发货
        </el-button>
        <el-button 
          type="success" 
          disabled 
          v-else>
          已完成
        </el-button>
      </div>
    </div>
    
    <div class="no-order" v-else>
      <p>未找到订单信息</p>
      <el-button @click="goBack">返回列表</el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const router = useRouter()
const store = useStore()

// 获取订单信息
const order = computed(() => {
  return store.getters.getCurrentOrder
})

const goBack = () => {
  router.push('/orders/list')
}

// 发货功能
const deliverOrder = () => {
  // 更新订单状态为已完成
  const updatedOrder = {
    ...order.value,
    status: 'completed'
  }
  
  // 更新订单状态
  store.commit('REMOVE_ORDER', order.value.id)
  store.commit('ADD_ORDER', updatedOrder)
  store.commit('ADD_ADMIN_ORDER', updatedOrder)
  store.commit('SET_CURRENT_ORDER', updatedOrder)
  
  // 显示发货成功消息
  ElMessage.success('发货成功！订单状态已更新为已完成')
}
</script>

<style scoped>
.order-detail-page {
  padding: 20px;
}

.order-detail-page h2 {
  margin-bottom: 20px;
  color: #333;
}

.order-detail-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.order-info, .customer-info {
  flex: 1;
}

.info-item {
  margin-bottom: 15px;
  font-size: 14px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  display: inline-block;
  width: 80px;
}

.status-pending {
  color: #e6a23c;
  background-color: #fdf6ec;
  padding: 4px 8px;
  border-radius: 4px;
}

.status-completed {
  color: #67c23a;
  background-color: #f0f9ec;
  padding: 4px 8px;
  border-radius: 4px;
}

.order-summary {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.summary-item {
  margin-left: 30px;
  font-size: 16px;
}

.total-amount {
  color: #e53935;
  font-weight: bold;
  font-size: 18px;
}

.order-items h3 {
  margin-bottom: 15px;
  color: #333;
}

.item-info {
  display: flex;
  align-items: center;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.item-name {
  font-weight: bold;
}

.order-actions {
  text-align: center;
  margin-top: 30px;
}

.no-order {
  text-align: center;
  padding: 60px 0;
  color: #999;
}
</style>